<template>
    <view class="cu-modal bottom-modal" :class="showModal ? 'show' : ''">
        <view class="cu-dialog bg-white">
            <view class="cu-bar bg-white  justify-end">
                <view class="content full-width text-lg">积分充值</view>
                <view class="action" @tap="onCloseModal">
                    <text class="cuIcon-close text-gray"></text>
                </view>
            </view>
            <view class="padding-xl">
                <view class="cu-list grid goods-list" :class="['col-3']" v-if="platform != 'ios'">
                    <block v-for="(item, index) in goods" :key="index">
                        <view class="cu-item " :class="selectGoodsId == item.id ? 'select' : ''" :index="index" :data-id="item.id"
                            @tap="onGoodsSelect">
                            <view class="text-lg">{{ "￥" + item.currPrice }}</view>
                            <view class="text-sm text-grey ">{{ item.desc }}</view>
                            <view class=" text-black">{{ item.name }}</view>
                        </view>
                    </block>
                </view>
            </view>
            <view class="cu-bar bg-white justify-center" v-if="platform != 'ios'">
                <view class="action footer-btn-bg">
                    <button class="cu-btn  bg-green cu-btn-oval footer-btn-bg" @tap="onConfirm">去充值</button>
                </view>
            </view>
            <view class="cu-bar bg-white justify-center" v-if="platform == 'ios'">
                <view class="action footer-btn-bg">
                    <button class="cu-btn  bg-green cu-btn-oval footer-btn-bg" @tap="showWxQrocde">联系官方客服</button>
                </view>
            </view>
        </view>

    </view>
</template>
<script src="./Recharge.ts"/>
<style scoped>
.goods-list {
    text-align: center;
    margin: 0 auto;
    justify-content: center;
}

.goods-list view.cu-item:nth-child(2) {
    margin: auto 10rpx;
}

.cu-list.grid.goods-list>.cu-item {
    padding: unset;
}

.goods-list view.cu-item {
    width: 32%;
    border: 1px solid #ece5b4;
}


.goods-list view.cu-item view {
    line-height: 60rpx;
}

.goods-list view.cu-item view:first-child {
    line-height: 80rpx;
    color: #f1d82d;
    font-weight: bold;
}

.goods-list view.cu-item view:last-child {
    background-color: #ece5b4;
    margin-bottom: 0;
}

.goods-list view.cu-item.select {
    border: 1px solid #f1d82d;
}

.goods-list view.cu-item.select view:last-child {
    background-color: #f1d82d;
}</style>
